<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>图片轮播效果制作_赵一鸣随笔博客</title>
    <script src="../Public/js/jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            //鼠标滑过banner，左右按钮进行显示和隐藏
            $(".banner").hover(function(){
                $(".lr").show();
            },function(){
                $(".lr").hide();
            });
            //点击下面的小按钮，图片进行左右切换效果
            $(".anniu li").click(function(){
                $(this).addClass("on").siblings().removeClass("on");
                var num=$(this).index();
                $(".pic").animate({marginLeft:-350*num},"slow");
            });
            //图片自动轮播效果
            var a=0;
            var automatic=setInterval(function(){
                a++;
                a=a%5;
                $(".pic").animate({marginLeft:-350*a},"slow");
                $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
            },6000);
            //点击左右按钮，图片进行切换效果
            $(".pre").click(function(){
                a--;
                a=(a+5)%5;
                $(".pic").animate({marginLeft:-350*a},"slow");
                $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
            });
            $(".next").click(function(){
                a++;
                a=a%5;
                $(".pic").animate({marginLeft:-350*a},"slow");
                $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
            });
        });
    </script>
    <style>
        *{margin:0px;padding:0px}
        li{list-style:none}
        a{text-decoration:none}
        img{border:0px}
        .banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden}
        .banner .pic{width:9999px;height:495px}
        .banner .pic li{width:350px;height:495px;float:left}
        .banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}
        .banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline;
            cursor:pointer;border-radius:100%}
        .banner .anniu li.on{background:red}
        .banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none}
        .banner .lr a{color:white}
        .banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}
        .banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}

    </style>

</head>
<body>
<div class="banner">
    <ul class="pic">
        <li>
            <a href="#"><img src="../Photo/hongse.png" alt="美女" width="350" height="495"></a>
        </li>
        <li>
            <a href="#"><img src="../Photo/heise.png" alt="美女" width="350" height="495"></a>
        </li>
        <li>
            <a href="#"><img src="../Photo/huise.png" alt="美女" width="350" height="495"></a>
        </li>
        <li>
            <a href="#"><img src="../Photo/luse.png" alt="美女" width="350" height="495"></a>
        </li>
        <li>
            <a href="#"><img src="../Photo/zongse.png" alt="美女" width="350" height="495"></a>
        </li>
    </ul>
    <ul class="anniu">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="lr">
        <li class="pre"><a href="#"> < </a></li>
        <li class="next"><a href="#"> > </a></li>
    </ul>
</div>
</body>
</html>